<template>
  <div class="cart-list-item">
    <div :style="{width: props.columnWidth[0]}"
         class="xtxColor">
      <checkbox v-if="data.isEffective"
                v-model="data.selected"
                @click="checkClick"/>
    </div>
    <div :style="{width: props.columnWidth[1]}"
         class="detail">
      <router-link v-slot="{ navigate }"
                   :to="`/product/${data.id}`"
                   custom>
        <img :src="data.picture"
             class="left"
             @click="navigate"/>
      </router-link>
      <div class="right">
        <p class="ellipsis">{{ data.name }}</p>
        <cart-sku-select :data="data"/>
      </div>
    </div>
    <div :style="{width: props.columnWidth[2]}">
      ￥{{ data.price }}
    </div>
    <div :style="{width: props.columnWidth[3]}">
      <good-count v-if="data.isEffective"
                  v-model:count="data.count"
                  :max="data.stock"
                  @change="countChange"/>
      <span v-else>一</span>
    </div>
    <div :style="{width: props.columnWidth[4]}"
         class="price">
      <template v-if="data.isEffective">
        ￥{{ data.price * data.count }}
      </template>
      <span v-else>一</span>
    </div>
    <div :style="{width: props.columnWidth[5]}"
         class="option">
      <p v-if="data.isEffective">移入收藏夹</p>
      <p class="xtxColor"
         @click="delClick">删除</p>
      <p>找相似</p>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import CartSkuSelect from '@/components/library/CartSkuSelect.vue'
import Checkbox from '@/components/library/Checkbox.vue'
import confirm from '@/components/library/Confirm/index'
import GoodCount from '@/components/library/GoodCount.vue'
import message from '@/components/library/Message/index'
import {useCartStore} from '@/stores/cart'
import type {CartItem} from '@/types/cart'

let store = useCartStore()

let props = defineProps<{
  columnWidth: string[]
  data: CartItem
}>()

let delClick = async () => {
  let res = await confirm({
    message: `亲，是否确认移除商品（${props.data.name}）？`
  })
  if (!res) return message.warn('用户取消操作')
  await store.deleteFromCart(props.data)
}

let checkClick = () => {
  store.updateFromCart(props.data.skuId ?? '', {
    skuId: props.data.skuId,
    count: props.data.count,
    selected: props.data.selected
  })
}

let countChange = () => {
  store.updateFromCart(props.data.skuId ?? '', {
    skuId: props.data.skuId,
    count: props.data.count,
    selected: props.data.selected
  })
}
</script>

<style lang="less"
       scoped>
.price {
  color: @priceColor;
}

.xtxColor {
  color: @xtxColor;
}

.cart-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:not(:last-of-type) {
    border-bottom: 1px solid #f5f5f5;
  }

  > div {
    height: 121px;
    display: flex;
    justify-content: center;
    align-items: center;

    &.option {
      display: flex;
      flex-direction: column;

      p {
        cursor: pointer;
      }
    }

    &.detail {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .left {
        cursor: pointer;
        width: 100px;
        height: 100px;
        margin-right: 10px;
      }

      .right {
        font-size: 16px;
        color: #666666;

        p {
          padding-bottom: 10px;
          overflow: hidden;
          width: 100%;
        }
      }
    }
  }
}
</style>